<template>
  <!-- 接入数据源 -->
  <div class="app-container flex">
    <div class="tabs">
      <tabList :data="tabs" @handleClick="handleClick"/>
    </div>
    <div class="container">
      <host v-if="tabIndex==0"></host>
      <user v-if="tabIndex==1"></user>
      <application v-if="tabIndex==2"></application>
      <dataInfo v-if="tabIndex==3"></dataInfo>
      <account v-if="tabIndex==4"></account>
    </div>
  </div>
</template>

<script>
import host from './gatherData/host'
import user from './gatherData/user'
import application from './gatherData/application'
import dataInfo from './gatherData/dataInfo'
import account from './gatherData/account'
import tabList from './gatherData/tabList'

export default {
 
  components: { host, user, application, dataInfo, account, tabList },
  data() {
    return {
      tabIndex: 0,
      tabs: [{
        title: '主机',
        img: 'fxyq_stgl_01.png'
      }, {
        title: '人员',
        img: 'fxyq_stgl_02.png'
      }, {
        title: '应用',
        img: 'fxyq_stgl_03.png'
      }, {
        title: '数据',
        img: 'fxyq_stgl_04.png'
      }, {
        title: '账号',
        img: 'fxyq_stgl_05.png'
      }]

    }
  },
  created() {
  },
  methods: {
    handleClick(index) {
      this.tabIndex = index
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin flex {
  display: flex;
  justify-content: center;
}

//重定义样式
.app-container {
  &.flex {
    padding: 0;
    @include flex;
    height: 100%;
    overflow: hidden;
    background: #eef0f5;
  }


  .container {
    background: #fff;
    width: calc(84% - 10px);
    height: 100%;
  }
}

</style>
